<template>
<!--    上传头像-->
    <el-card class="card">
        <div style="text-align: center;margin-bottom: 30px"><b >修改个人信息</b></div>
        <el-form label-width="60px">
<!--            改头像-->
            <el-form-item label="头像">
<!--                Element UI 提供的上传组件，用于实现文件上传功能-->
<!--                action发送到后端端口-->
                <el-upload
                        class="avatar-uploader"
                        action="http://localhost:8888/avatar"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                >
<!--                    图片显示逻辑，如果 form.avatarUrl 存在（非空），则显示图片。-->
<!--                    绑定到 form.avatarUrl，这是上传成功后获取的头像图片链接。-->
                    <img v-if="form.avatarUrl" :src="form.avatarUrl" class="avatar">
<!--                    不存在，显示一个加号-->
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="昵称">
                <el-input v-model="form.nickname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="form.email" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="地址">
                <el-input v-model="form.address" autocomplete="off"></el-input>
            </el-form-item>
            <el-button type="primary" style="margin-left: 190px;margin-top: 20px" @click="save">确 定</el-button>


        </el-form>
    </el-card>
</template>

<script>
    export default {
        name: "Person",
        data(){
            return{
                form: {},
                //从本地存储中获取用户信息，并将其解析为JavaScript对象
                user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
            }
        },
        methods:{
            //图片上传成功钩子
            handleAvatarSuccess(res) {
                this.imageUrl = res.data;
                this.form.avatarUrl = this.imageUrl;
            },
            //提交事件
            save(){
                //把表格传给后台，保存到数据库
                this.request.post("/user",this.form).then(res=>{
                    if(res.code==='200'){
                        this.$message.success("保存成功");
                        //把表格的数据更新到user中
                        for (let key in this.form){
                            this.user[key] = this.form[key];
                        }
                        //更新localstorage的user
                        localStorage.setItem('user',JSON.stringify(this.user));
                        this.$emit("refresh")
                        this.$router.go(0);
                    }else{
                        this.$message.error(res.msg)
                    }
                })
            },
        },
        created() {
            //后端 获取信息 res后端返回响应的数据
            this.request.get("/userinfo/"+this.user.username).then(res=>{
                if(res.code==='200'){
                    this.form = res.data;
                //    给form对象
                }else{
                    alert(res.msg)
                }
            })
        },
        computed:{
            //计算属性 动态生成一个 对象  用户的令牌（token）作为请求头信息。
            //作用是为上传组件的请求头部信息提供一个包含用户认证令牌的对象
            token() {
                return{ token: this.user.token}
            }
        },
    }
</script>

<style scoped>
    .card{
        width: 500px;
        margin: 80px auto;
        padding: 30px;
        color: #263b57;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #a2afc2;
        width: 138px;
        height: 138px;
        line-height: 138px;
        text-align: center;
    }
    .avatar-uploader {
        padding-bottom: 10px;
    }
    .avatar {
        width: 138px;
        height: 138px;
        display: block;
    }

</style>